<template>
  <div class="zhanshi">
      <div class="top">
          <img src="qita/64.png" alt="" @click="fun()">
          <img src="qita/66.png" alt="">
      </div>
      <div class="lunbo">
           <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, i) in img" :key="i"
          ><img :src="v.require" alt="" 
        /></van-swipe-item>
      </van-swipe>
      </div>
      <div class="message">
          <span>￥12.9</span>
          <h2>100%真丝家居服春夏睡衣男女款 165/88A 藏青色</h2>
          <p>1 6A级珍贵桑蚕丝</p>
          <p>2 法式优雅设计 爱的礼物</p>
          <p>3 柔软舒适，尊贵体验</p>
      </div>
      <div class="pic"><img src="qita/61.png" alt=""></div>
      <div class="bottom">
           <div class="xuan"><span>已选</span><a href="#">短袖款 165/88A 藏青色 ×1</a><img src="qita/60.png" alt=""></div>
          <div class="xuan"><span>送至</span><a href="#">北京北京市海淀区清河街道</a><img src="qita/60.png" alt=""></div>
      </div>
       <div class="pingjia"><span>用户评价（1）</span><a href="#">查看全部</a><img src="qita/60.png" alt=""></div>
      <div class="buy">
          <ul>
              <li><img src="qita/62.png" alt=""><a href="#">店铺</a></li>
              <li><img src="qita/63.png" alt=""><a href="#">购物车</a></li>
          </ul>
          <div class="gouwu">
              <span>加入购物车</span>
              <b>立即购买</b>
          </div>
         
      </div>
       <div class="foot">

          </div>
  </div>
</template>

<script>
export default {
data() {
    return {
      img: [
        { require: "qita/70.png" },
        { require: "qita/71.png" },
        { require: "qita/72.png" },
        { require: "qita/73.png" },
        { require: "qita/74.png" },
      ],
    };
  },
  methods:{
      fun(){
          this.$router.push("/car")
      }
  }
  
}
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.zhanshi{
    width: 100%;
   
}
.zhanshi .top{
    width: 100%;
    height: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.1rem;
box-sizing: border-box;
background-color: transparent;
}
.zhanshi .top img{
    display: block;
    width: 0.33rem;
    height: 0.33rem;
}
.zhanshi .message{
    width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
     background-color: #fff;
}
.zhanshi span{
    font-size: 0.24rem;
    display: block;
        color: rgb(153, 98, 26);
        text-align: left;
}
.zhanshi h2{
    font-size: 0.14rem;
    color: #000;
    text-align: left;
}
.zhanshi p{
    font-size: 0.1rem;
    color: #999;
    text-align: left;
    line-height: 0.1rem;
}

.zhanshi  .pic{
    display: flex;
    width: 100%;
    height: 0.5rem;
    margin-top: 0.1rem;
}
.zhanshi .pic img{
    width: 100%;
}
.zhanshi .bottom{
    width: 100%;
}
.zhanshi .bottom .xuan{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    box-sizing: border-box;
     background-color: #fff;
}
.zhanshi .bottom  .xuan span{
    font-size: 0.16rem;
    color: #666;
    display: block;
    width: 0.5rem;
    height: 0.3rem;
}
.zhanshi .bottom  .xuan a{
    font-size: 0.14rem;
    display: block;
    width: 4.5rem;
     height: 0.3rem;
     margin-left: -1rem;
}
.zhanshi .bottom  .xuan img{
    display: block;
    width: 0.1rem;
     height: 0.1rem;
     padding-bottom: 0.2rem;
} 
.zhanshi  .pingjia{
    width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zhanshi  .pingjia span{
    font-size: 0.16rem;
    color: #000;
    display: block;
}
.zhanshi .pingjia a{
    font-size: 0.14rem;
    display: block;
}
.zhanshi .pingjia img{
     display: block;
    width: 0.1rem;
     height: 0.1rem;
}
.zhanshi .buy{
    width: 100%;
    height: 0.6rem;
    background-color: #fff;
    display: flex;
    padding: 0.1rem;
    box-sizing: border-box;
}
.zhanshi ul{
    width: 1.5rem;
    display: flex;
    align-items: center;
}
.zhanshi ul li{
    width: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.zhanshi ul li img{
    display: block;
    width: 0.3rem;
}
.zhanshi ul li a{
    font-size: 0.14rem;
}
.zhanshi .gouwu{
    display: flex;
    justify-content: space-between;
    border-radius: 0.1rem;
}
.zhanshi .gouwu span{
    width: 1rem;
    height: 0.45rem;
    display: block;
     line-height: 0.45rem;
     text-align: center;
    font-size: 0.14rem;
    border-radius:  0.1rem 0 0 0.1rem;
    color: #fff;
    background-color: rgb(240, 206, 123);
}
.zhanshi .gouwu b{
    width: 0.9rem;
     height: 0.45rem;
     border-radius: 0 0.1rem 0.1rem 0;
    display: block;
     color: #fff;
     line-height: 0.45rem;
    background-color:  rgb(240, 78, 46);
    font-size: 0.14rem;
}
.zhanshi .foot{
    height: 2rem;
    background-color: transparent;
}
</style>